<!-- src/views/user/Login.vue -->
<template>
  <n-message-provider>
    <div class="login-container">
      <div class="login-card">
        <div class="login-header">
          <h2 class="login-title">用户登录</h2>
          <p class="login-subtitle">欢迎回来，请输入您的账户信息</p>
        </div>
        
        <n-form 
          ref="formRef" 
          :model="model" 
          :rules="rules"
          class="login-form"
        >
          <n-form-item path="userName" label="用户名">
            <n-input 
              v-model:value="model.userName" 
              placeholder="请输入用户名"
              @keydown.enter="handleLogin"
            >
              <template #prefix>
                <n-icon>
                  <UserIcon />
                </n-icon>
              </template>
            </n-input>
          </n-form-item>
          
          <n-form-item path="password" label="密码">
            <n-input 
              v-model:value="model.password" 
              type="password" 
              placeholder="请输入密码"
              @keydown.enter="handleLogin"
            >
              <template #prefix>
                <n-icon>
                  <LockIcon />
                </n-icon>
              </template>
            </n-input>
          </n-form-item>
          
          <n-form-item>
            <n-button 
              type="primary" 
              @click="handleLogin" 
              :loading="loading"
              block
              size="large"
            >
              登录
            </n-button>
          </n-form-item>
        </n-form>
        
        <div class="login-footer">
          <div class="register-link">
            还没有账户？
            <n-button type="primary" text @click="goToRegister">立即注册</n-button>
          </div>
          <div class="register-link">
            不想登录？
            <n-button type="primary" text @click="goOffline">离线使用</n-button>
          </div>
        </div>
      </div>
    </div>
  </n-message-provider>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';
import { UserOutlined as UserIcon, LockOutlined as LockIcon } from '@vicons/antd';
import { useUserStore } from '../../store/user';

const router = useRouter();
const message = useMessage();
const formRef = ref<any>(null);
const loading = ref(false);
const userStore = useUserStore()

interface LoginReq {
  userName: string | null;
  password: string | null;
}

const model = ref<LoginReq>({
  userName: null,
  password: null,
});

const rules = {
  userName: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ],
};

const handleLogin = () => {
  formRef.value?.validate((errors: any) => {
    if (!errors) {
      loading.value = true;
      userStore.login(model.value.userName||'',model.value.password||'').then(() => { 
      }).then(()=>{
         message.success('登录成功');
          router.push('/');
      }).catch((_)=>{
        message.error('登录失败');
        loading.value = false;
      });
      // 模拟登录过程
      // setTimeout(() => {
      //   // 实际项目中这里应该调用登录API
      //   localStorage.setItem('isAuthenticated', 'true');
      //   message.success('登录成功');
      //   router.push('/');
      //   loading.value = false;
      // }, 1000);
    } else {
      message.error('请检查表单填写是否正确');
    }
  });
};

const goToRegister = () => {
  
  router.push({name:'register'})
};
function goOffline() {
  localStorage.setItem('storageEngine', 'local')
  router.push({name:'reader'})

}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 40px 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.login-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.login-form {
  margin-bottom: 20px;
}

:deep(.n-form-item-label) {
  font-weight: 500;
  color: #555;
}

:deep(.n-input) {
  height: 42px;
}

:deep(.n-input__prefix) {
  margin-right: 8px;
}

:deep(.n-icon svg) {
  width: 18px;
  height: 18px;
}

.login-footer {
  text-align: center;
}

.register-link {
  color: #666;
  font-size: 14px;
}

.register-link .n-button {
  font-weight: 500;
}
</style>